<template>
  <div class="home">
    <my-header v-model="title" @enter="add(title)">
      <!-- v-model 是 两个指令的合写 v-bind:value和v-on:input -->
      <h3>TODOLIST</h3>
    </my-header>

    <!-- v-model也可以表示为： -->
    <!-- <my-header :value="title" @input="change"></my-header> -->

    <h1>{{ title }}</h1>

    <my-list :list="list">
      <h3>所有任务 {{ list.length }}</h3>
    </my-list>
    <my-list :list="unList">
      <h3>未完成任务 {{ unList.length }}</h3>
    </my-list>
    <my-list :list="finishedList">
      <h3>已完成任务 {{ finishedList.length }}</h3>
    </my-list>

    <hr />
    <h1>来自vuex的数据有{{ age }}={{ name }}</h1>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from "@/components/myHeader.vue";
import myList from "@/components/myList.vue";

import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      title: "hello",
    };
  },
  name: "Home",
  components: {
    myHeader,
    myList,
  },
  methods: {
    // add() {
    //   this.$store.commit("add", this.title);
    // },
    // 可以通过辅助函数写成：
    ...mapMutations(["add"]),
    ...mapActions(["getList"]),
    //展开action也应该在methods中展开 相当于是展开了成了一个方法
  },
  // methods: {
  //   // change(val) {
  //   //   this.title = val;
  //   // },
  //   // 用v-model的话 自带的有这个事件 不用写了
  // },
  computed: {
    // age() {
    //   return this.$store.state.age;
    // },
    // name() {
    //   return this.$store.state.name;
    // },
    // allList() {
    //   return this.$store.state.list;
    // },
    //所有的数据
    // finishedList() {
    //   let res = this.$store.state.list.filter((item) => {
    //     return item.status == true;
    //   });
    //   return res;
    // },
    //完成的列表
    // unList() {
    //   let res = this.$store.state.list.filter((item) => {
    //     return item.status == false;
    //   });
    //   return res;
    // },
    //未完成的列表
    // 在这里可以认为 在计算属性里 对所有的数据进行计算 算出了一个已完成和一个未完成的数据 除了在这里计算还可以在getters里面进行计算
    ...mapState(["list"]),
    ...mapGetters(["finishedList", "unList"]),
  },

  created() {
    // this.$store.dispatch("getList");
    //调用action用dispatch
    this.getList();
  },
};
</script>
